<template>
  <el-main>
    <el-table v-show="flag"
      v-loading="loading"
      :data="tableData1_3"
      ref="tableData1_3"
      style="width: 100%"
      border
      show-summary
    >
      <el-table-column
        prop="areaName"
        label="分发成果分布区域"
        width="200"
        header-align="center"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="receiveUnitNum"
        label="申领成果的单位数量（家）"
        width="200"
        header-align="center"
        align="center"
      >
      </el-table-column>
      <el-table-column width="200" label="领取次数（次）" header-align="center" prop="receiveTimes"
        align="center"> </el-table-column>
      <el-table-column label="领取纸质地形图数量（幅）" width="300" header-align="center" align="center" prop="receiveNum_DXT">
      </el-table-column>
      <el-table-column label="领取4D成果数量（幅）" width="300" header-align="center" align="center" prop="receiveNum_4D">
      </el-table-column>
      <el-table-column label="领取控制点成果数量（个）" width="300" header-align="center" align="center" prop="receiveNum_Point">
      </el-table-column>
    </el-table>
    <div v-show="!flag" id="main" style="width: 100%; height: 400px;"></div>
  </el-main>
</template>

<script>
import { adminAreaReport} from "@/api/report/basic";
var myChart;


export default {
  name: "table1_3",
  data() {
    return {
      flag: true,
      loading: false,
      spanArr: [],
      spanArr1: [],
      tableData1_3: [],
      tableChart: [],
      queryParams: {},
      option: {
              title: {
                text: "分发成果分布区域",
              },
              tooltip: {},
              legend: {
                data: ["领图次数"],
              },
              xAxis: {
                data: [],
                axisLabel:{
                    		interval: 0
                    	}
              },
              yAxis: {},
              series: [
                {
                  name: "领图次数",
                  type: "bar",
                  data: [],
                  animationDelay: function(idx) {
                  						return idx * 10 + 1000;
                  },
            barWidth : 60,
            itemStyle: {
            normal: {
                // 随机显示
                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
              
                // 定制显示（按顺序）
                color: function(params) { 
                    var colorList = [ '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',

                               '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',

                               '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0' ]; 
                    return colorList[params.dataIndex] 
                },
                label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: { //数值样式
										color: 'black',
										fontSize: 16
									}
								},
            },
        },
                },
              ],
        grid: {
          left: "8%",
          right: "0",
          bottom: "10%",
          containLabel: true,
        },
            }

    };
  },
  mounted(){
    this.$emit("reportSearch","");
  },
  methods:{
    export2Excel(name) {
        const tHeader = ["分发成果分布区域", "申领成果单位数量（家）", "领取次数（次）","领取纸质地形图数量（幅）","领取4D成果数量（幅）","领取控制点成果数量（个）"];
        var filterVal = []
        for(var i in this.tableData1_3[0]){
          if(i != "type" && i != "statistics"){
            filterVal.push(i)
          }
        }
        console.log(filterVal)
       // common.export2Excel(name,tHeader,filterVal,this.tableData0_0)
        require.ensure([], () => {
          const { export_json_to_excel } = require("@/views/basic-report/common/Export1_5");
          const list = this.tableData1_3;
          const data = this.formatJson(filterVal, list);
          
          export_json_to_excel(tHeader, data, name);
        });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
    myEcharts() {
       this.refreshchart();
    },
    showchart(selectValue,queryParams){
      this.flag = !this.flag;
      if(!this.flag){
          this.refreshchart(queryParams);
      }
    },
    refreshchart(queryParams){
       // 基于准备好的dom，初始化echarts实例
       myChart = this.$echarts.init(document.getElementById("main"));
       if(queryParams){
          this.queryParams = queryParams;
       }
       var valueType = this.queryParams.chartValueType;
       var valueTypeName = this.queryParams.chartValueTypeName;
       if(valueType){
           console.log(valueType);
        var condition = {};
        condition.beginTime = this.queryParams.beginTime;
        condition.endTime = this.queryParams.endTime;
        condition.order = valueType + " desc";
        condition.topNum = this.queryParams.topNum;
        typeAppReport(condition).then((response) => {
          this.tableChart = response.rows;
           this.option.xAxis.data = [];
           this.option.series[0].data = [];
           this.option.legend.data[0] = valueTypeName;
           this.option.series[0].name = valueTypeName;
           for (var i = 0; ((i < this.tableChart.length)&&(this.option.series[0].data.length<=20)); i++) {
                 this.option.xAxis.data.push(this.tableChart[i].projectName);
                 this.option.series[0].data.push(this.tableChart[i][valueType]);
           }
           myChart.setOption(this.option);
           setTimeout(function() {
              myChart.resize();
           },100);
           // 使用刚指定的配置项和数据显示图表。
        });
       }
    },
    getReportData(queryParam) {
      this.loading = true;
      var condition = {};
      if(queryParam){
      condition.beginTime = queryParam.beginTime;
      condition.endTime = queryParam.endTime;
      condition.order = "t4.fcontent asc";
      adminAreaReport(condition).then(response => {
                           this.tableData1_3 = response.rows;
                           this.total = response.total;
                           this.myEcharts();
                           this.loading = false;
       });
     }else{
                      this.tableData1_3 = [];
                      this.loading = false;
                    }
   }
  }
};
</script>
